<template>
  <div class="creation page">
    <div class="tabs">
      <div v-for="(item, index) in tabsList" :key="index">
        <img :src="item.icon" alt="" />
        <div class="right">
          <p>{{ item.label}}</p>
          <h3>{{ item.data }}</h3>
        </div>
      </div>
    </div>
    <div class="tableList">
      <div class="title">
        <div>剧本列表</div>
        <div @click.stop="$router.push('/creat')" class="creat">创作</div>
      </div>
      <div class="filter">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item label="所属分类：">
            <el-select
              v-model="formInline.creationTypeId"
              placeholder="所属分类："
            >
              <el-option
                :label="item.creationTypeModel.creationTypeName"
                :value="item.creationTypeModel.id"
                v-for="(item, index) in creationType"
                :key="index"
                @click.stop="getList"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="formInline.workState" placeholder="状态：">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in statusList"
                :key="index"
                @click.stop="getList"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">筛选</el-button>
            <el-button @click="(formInline = {}), getList()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%" height="400" class="table">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="标题" width="180">
            <template #default="scope">
              <div class="tableTitle">
                <h3>{{ scope.row.title }}</h3>
                <span>{{ scope.row.publisher }}</span>
                <span>{{ scope.row.createTime.split(" ")[0] }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="hashCode" label="区块Hash">
            <template #default="scope">
              <span class="spanColor">{{ strTrans(scope.row.hashCode)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creationTypeName" label="类型">
          </el-table-column>
          <el-table-column prop="workState" label="状态">
            <template #default="scope">
              <span>{{ workState(scope.row.workState) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" type="text" v-if="scope.row.workState == 1" @click.stop="$router.push({path:'/creatEditer',query:{id:scope.row.id}})">编辑</el-button>
              <el-button size="mini" type="text" @click="del(scope.row)" v-if="scope.row.workState != 3 && scope.row.workState != 5 && scope.row.workState != 6">删除</el-button>
              <el-button size="mini" type="text" @click="zhuanrang(scope.row)" v-if="scope.row.workState == 3">版权转让</el-button>
              <div v-if="scope.row.workState == 5">已上架</div>
            </template>
          </el-table-column>
        </el-table>

<!--        <div style="text-align: center; margin-top: 20px">-->
<!--          <el-pagination-->
<!--            background-->
<!--            v-model:currentPage="currentPage"-->
<!--            layout="prev, pager, next"-->
<!--            :total="total"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--          >-->
<!--          </el-pagination>-->
<!--        </div>-->

      </div>
    </div>
  </div>
</template>
<script>
import {
  ScriptWritingList,
  CreationTypeListByTypeId,
  ScriptWritingCount,
  ScriptWritingDel,
  ScriptWritingEdit,
  ScriptWritingReview,
} from "@/api/ScriptWriting";
import _ from "lodash";
import { ElLoading } from 'element-plus'
export default {
  data() {
    return {
      formInline: {},
      tabsList: [
        {
          icon: require("@/assets/img/jb1.png"),
          label: "有效剧本",
          data: "0",
        },
        {
          icon: require("@/assets/img/jb2.png"),
          label: "待审核剧本",
          data: "0",
        },
        {
          icon: require("@/assets/img/jb3.png"),
          label: "免费剧本",
          data: "0",
        },
        {
          icon: require("@/assets/img/jb4.png"),
          label: "草稿剧本",
          data: "0",
        },
      ],
      tableData: [],
      creationType: [],
      ChooseCreationList: [],
      total: 0,
      statusList: [
        { value: 1, label: "草稿" },
        { value: 2, label: "待审核" },
        { value: 3, label: "审核通过" },
        { value: 4, label: "驳回" },
        { value: 5, label: "已上架" },
        { value: 6, label: "已出售" },
      ],
      currentPage:1,
    };
  },
  created() {
    this.getList();
    this.getFilter(0);
    this.scriptWritingCount();
  },

  methods: {
    test(){
        console.log(this.formInline)
    },
    strTrans(d) {
      if(d == null || d == undefined){
        return ' '
      }else{
        return (
                d.substring(0, 6) + "..." + d.substring(d.length - 5, d.length - 1)
        );
      }
    },
    del(row) {
      ScriptWritingDel({ id: row.id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getList();
        } else {
          this.$message.error(res.data);
        }
      });
    },
    zhuanrang(row){
      console.log('row',row)
      const loadingInstance = ElLoading.service({ fullscreen: true })
      ScriptWritingReview({id:row.id,workState:5}).then(res=>{

        this.getList()
        loadingInstance.close()

      })

    },
    scriptWritingCount() {
      ScriptWritingCount().then((res) => {
        this.tabsList[0].data = res.data[0].yxcount;
        this.tabsList[1].data = res.data[0].dshcount;
        this.tabsList[2].data = res.data[0].mfcount;
        this.tabsList[3].data = res.data[0].cgcount;
      });
    },
    workState(nv) {
      return _.filter(this.statusList, (v) => v.value == nv)[0].label;
    },
    getList() {
      ScriptWritingList(this.formInline).then((res) => {
        this.tableData = res.data.list;
        console.log("数据为",res)
        this.total = res.data.total*10;
        console.log('total',this.total)
      });
    },
    getFilter(type) {
      CreationTypeListByTypeId({ typeId: type }).then((res) => {
        if (type == 0) {
          this.creationType = res.data;
        } else {
          this.ChooseCreationList = res.data;
        }
      });
    },
    onSubmit() {},
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>
<style lang="scss" scoped>
.creation {
  margin-bottom: 30px;
  .tabs {
    display: flex;
    justify-content: space-between;
    & > div {
      width: 235px;
      height: 130px;
      background: #ffffff;
      box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 52px;
        height: 52px;
        margin-right: 20px;
      }
      .right {
        p {
          color: #878787;
          font-size: 14px;
        }
        h3 {
          color: #333333;
          font-size: 22px;
          margin-top: 5px;
        }
      }
    }
  }
  .tableList {
    background: #ffffff;
    box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
    border-radius: 4px;
    margin-top: 20px;
    padding-bottom: 20px;
    .title {
      height: 60px;
      line-height: 60px;
      text-indent: 20px;
      background: #2eb0c6;
      box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
      font-size: 16px;
      font-weight: bold;
      color: #000000;

      display: flex;
      justify-content: space-between;
      align-items: center;

    }
    .creat{

      width: 70px;
      height: 40px;
      background: orange;
      margin-right: 20px;
      cursor: pointer;
      line-height: 45px;
      border-radius: 8px;
      color: #ffffff;
    }
    .filter {
      margin: 20px;
    }
    ::v-deep {
      .el-table__header-wrapper {
        th {
          background: #f5f6f6;
          color: #333333;
          text-align: center;
        }
      }
    }
    .tableTitle {
      display: flex;
      flex-direction: column;
      h3 {
        color: #2eb0c6;
        font-size: 14px;
      }
      span {
        font-size: 12px;
        color: #7d7d7d;
      }
    }
  }
  .spanColor {
    color: #2eb0c6;
  }
}
  .table{
    ::v-deep {
       td.el-table__cell {
        text-align: center;
        transition: background-color .25s ease;
      }
    }
  }
</style>
